import "package:flutter/material.dart";
import "package:myapp/pages/animationPage.dart";
import "../testWidget/useBottomBar.dart";
import "../testWidget/useDrawer.dart";

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

// 1、AppBar下的导航栏，首先混入 SingleTickerProviderStateMixin 用于创建 _tabController
// 2、定义TabControl
// 3、appBar配置bottom Tab，数量与TabControl的length一致
// 4、body配置 TabBarView，数量与TabControl的length一致
// 5、bottom 与 body 的 Tab和TabBarView 配置controller为同一个 TabControl
class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

// 生命周期函数：当组件初始化会触发
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    // _tabController.addListener(() {
    //   // print(_tabController.index); //点击tab会触发两次，滑动切换tabView触发一次
    //   if (_tabController.animation!.value == _tabController.index) {
    //     print(_tabController.index);
    //   }
    // });
  }

  // 最贱销毁时触发
  @override
  void dispose() {
    super.dispose();
    // 销毁
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 导航栏
      appBar: AppBar(
        // 左侧 图标会占用drawer的打开按钮
        leading: IconButton(
          icon: const Icon(Icons.abc),
          onPressed: () {},
        ),
        title: const Text('我是AppBar1'),
        backgroundColor: Colors.blue[300],
        actions: [
          //右侧多个操作按钮数组
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {},
          )
        ],
        // tab栏配置与body的tabBarView的顺序对应
        bottom: TabBar(
          // isScrollable: true, //是否可水平滚动
          // indicatorColor: Colors.red, //指示器的颜色
          // indicatorWeight: 2, //指示器高度
          // indicatorPadding: const EdgeInsets.all(5), //指示器边距
          // indicatorSize: TabBarIndicatorSize.tab, //指示器宽度
          // indicator: BoxDecoration(
          //     //指示器装饰
          //     color: Colors.orange,
          //     borderRadius: BorderRadius.circular(2)),
          // labelColor: Colors.pink, //选中tab文字颜色
          // unselectedLabelColor: Colors.green, //未选中tab文字颜色
          // labelStyle: const TextStyle(fontSize: 14), //选择文字样式
          // unselectedLabelStyle: const TextStyle(fontSize: 12), //未选中文字样式
          controller: _tabController, //配置controller
          onTap: (index) {
            // 只能监听点击，不能监听滑动
            print(index);
          },
          tabs: const [
            Tab(
              child: Text('关注'),
            ),
            Tab(
              child: Text('热门'),
            ),
            Tab(
              child: Text('推荐'),
            )
          ],
        ),
      ),
      drawer: const UseDrawer(),
      // body: const UseStatefulWidgetList(),
      body: TabBarView(
        controller: _tabController, //配置controller
        children: [
          // 显示对应的tab显示内容，与tab配置对应顺序
          ListView(
            children: [
              ElevatedButton(
                  onPressed: () {
                    // 命名式路由导航
                    Navigator.pushNamed(context, "/search");
                  },
                  child: const Text('跳转search-命名式路由跳转')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/params',
                        arguments: {'params': '我是传递的参数params-命名式路由跳转'});
                  },
                  child: const Text('跳转params-命名式路由跳转')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/dialog',
                    );
                  },
                  child: const Text('跳转dialogPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/scroll',
                    );
                  },
                  child: const Text('跳转scrollPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/animatedList',
                    );
                  },
                  child: const Text('跳转AdminateListPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/pageView',
                    );
                  },
                  child: const Text('跳转PageViewPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/tabBarView',
                    );
                  },
                  child: const Text('跳转TabBarViewPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/customScrollView',
                    );
                  },
                  child: const Text('跳转customScrollViewPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/nestedScrollView',
                    );
                  },
                  child: const Text('跳转nestedScrollViewPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/listener',
                    );
                  },
                  child: const Text('跳转listenerPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(
                      context,
                      '/animation',
                    );
                  },
                  child: const Text('跳转animationPage')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        // 使用PageRouteBuilder进入和退出页面都会执行动画，当需要动态判断是否使用过渡动画则需要自定义继承PageRoute
                        PageRouteBuilder(
                            pageBuilder: (BuildContext context,
                                Animation<double> animation,
                                Animation secondaryAnimation) {
                              return FadeTransition(
                                opacity: animation,
                                child: const AnimationPage(),
                              );
                            },
                            transitionDuration:
                                const Duration(milliseconds: 500)));
                  },
                  child: const Text('自定义跳转动画跳转animationPage')),
            ],
          ),
          ListView(
            children: const [
              ListTile(
                title: Text('我的热门列表'),
              )
            ],
          ),
          ListView(
            children: const [
              ListTile(
                title: Text('我的推荐列表'),
              )
            ],
          )
        ],
      ),
      bottomNavigationBar: const UseBottomBar(),
    );
  }
}
